@import url(color.less);
#product {
  >.filter{
    position: relative;
    >.filter-name {
      display: flex;
      height: 30px;

      >a {
        width: 50%;
        height: 30px;
        display: block;
        text-align: center;
        line-height: 30px;
        border: 1px solid @border-color;
        position: relative;
      }
      >a:before {
        content: "";
        width: 16px;
        height: 12px;
        display: block;
        background-image: url("../images/down.png");
        position: absolute;
        right: 10px;
        top:50%;
        transform: translateY(-50%);
      }
      >a.opened:before {
        background-image: url("../images/up.png");
      }
    }
    >.shop-content,>.area-content {
      position: absolute;
      top: 30px;
      width: 100%;
      background-color: white;
      display: none;
      >a {
        display: block;
        padding: 10px;
        position: relative;
      }
      >a.haha:before {
        content: "";
        width: 27px;
        height: 22px;
        display: block;
        background-image: url("../images/check.png");
        background-size:27px 22px ;
        background-repeat:no-repeat;
        position: absolute;
        right: 10px;
        top:50%;
        transform: translateY(-50%);
      }
    }

  }
  >.product-list {
    display: flex;
    flex-wrap: wrap;
    background-color: #f8f8f8;
      >.product-box {
        width: 45%;
        text-align: center;
        margin: 20px 2.5% 0;
        background-color: #fff;
        >img {
        }
        >p {
          text-align: left;
        }
        >span {
          display: block;
          text-align: left;
        }
      }
  }
}